<template>
   <div>
          <el-form :inline="true" :model="searchDate" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="searchDate.name" placeholder="用户名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="SelectMultipel">查询</el-button>
            </el-form-item>
        </el-form>
        <el-card>
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">用户列表</span>
            <el-button type="primary" style="float:right" @click="add">
                新增
            </el-button>
        </div>
        <el-table v-if="tableData3.length>0" :data="tableData3" border style="width: 100%" >
            <el-table-column prop="ADMIN_ID" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="ADMIN_NAME" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="ADMIN_ROLE" label="角色" width="150">
            </el-table-column>          
            
            <el-table-column label="操作" width="100">
                <template scope="scope">
                    <el-button type="text" size="media" @click="UserEditer(scope.row.ADMIN_ID)">
                        <i class="el-icon-view"> 查看</i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="10" layout="total, prev, pager, next" :total="pagecount">
            </el-pagination>
        </div>
         </el-card>
       <el-dialog title="用户信息" :visible.sync="UserMessage" v-if="UserMessage">
       <user-show :type="type" :Id="Id" @close="close">
       </user-show>
       </el-dialog>
    </div>
</template>

<script>
import api from "@/js/api";
import UserShow from "@/components/System/UserShow";
export default {
  data() {
    return {
      pagecount: 0,
      currentPage1: 1,
      tableData3: [],
      searchDate: {
        name: ""
      },
      UserMessage: false,
      Id:'',//用户id
      type:''
    };
  },
  components: {
    "user-show": UserShow
  },
  methods: {
    UserEditer(Id) {
      this.UserMessage = true;
      this.Id=Id;
      this.type='查看';
    },
    add(){
     this.UserMessage = true;
      this.type='新增';
    },
    SelectMultipel() {
      var data = {
        pageIndex: this.currentPage1,
        pageSize: 10,
        name: this.searchDate.name
      };
      let that = this;
      api.UserGetByName(that, data, function(msg) {
        that.tableData3 = msg.Result;
        that.pagecount = msg.ListCount;
      });
    },
    handleCurrentChange(val) {
      this.currentPage1=val;
      this.SelectMultipel();
    },
    close(){
     this.UserMessage = false;
     this.SelectMultipel();
    }
  },
  created() {
    let that = this;
    var data = {
      pageIndex: this.currentPage1,
      pageSize: 10
    };
    api.UserGetList(that, data, function(msg) {
      that.tableData3 = msg.Result;
      that.pagecount = msg.ListCount;
    });
  }
};
</script>

<style>

</style>
